<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角形面积，在线计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        input {
            margin: 10px;
            padding: 10px;
            width: 70px;
        }
        button {
            padding: 10px 20px;
        }
        #result {
            margin-top: 20px;
            font-size: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <h1>在线计算器：三角形面积</h1>
    <label for="num1">
        请输入 ▲ 三条边的长度：
        <input type="number" id="num1" placeholder="边a长度">
        <input type="number" id="num2" placeholder="边b长度">
        <input type="number" id="num3" placeholder="边c长度">
    </label>

    <button onclick="calculate()">计算</button>
    <div id="result"></div>

    <script>
        function calculate() {
            const num1 = parseFloat(document.getElementById('num1').value);
            const num2 = parseFloat(document.getElementById('num2').value);
            const num3 = parseFloat(document.getElementById('num3').value);

            if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {
                document.getElementById('result').innerText = '请输入有效的数字';
                return;
            }

            if (num1 + num2 > num3 && num1 + num3 > num2 && num2 + num3 > num1) {
                const p = (num1 + num2 + num3) / 2;
                const area = Math.sqrt(p * (p - num1) * (p - num2) * (p - num3));
                document.getElementById('result').innerText = `三角形的面积为：${area.toFixed(2)}`;
            } else {
                document.getElementById('result').innerText = '两边之和必须大于第三边，才能构成三角形，方可计算其面积。';
            }
        }
    </script>
</body>
</html>
